<template>
	<view class="wrap">
		<!-- 自定义导航栏 -->
		<u-navbar :autoBack="true" :title="titleCurrent">
			<view slot="right">
				<view class="publish-wrap">
					<u-button size="mini" :type="publishDisabled?'default':'primary'" :disabled="publishDisabled"
						:loading="publishLoading" @click="addPost">
						<view class="publish-buttom-text">发布</view>
					</u-button>
				</view>
			</view>
		</u-navbar>
		<view>
			<u-input v-model="form.title" placeholder="标题 (必填) " maxlength="128"
				:custom-style="focusFlag?focusStyle:inputStyle" @focus="focusFlag=true"
				@blur="focusFlag=false"></u-input>
			<u-cell-group>
				<u-cell-item :title="chooseSection.sectionName"
					:title-style="chooseSection.sectionName!=='选择发布版块 (必选)'?chooseSectionTitleStyle:sectionTitleStyle"
					@click="showSectionList"></u-cell-item>
			</u-cell-group>
			<jin-edit ref="contentEditor" height="55vh" placeholder="请尽情发挥吧..." :header="header"
				:uploadFileUrl="uploadFileUrl" @editInput="inputChange" :html="contentHtml"></jin-edit>
			<view class="image-wrap">
				<text class="tips-text">封面图片</text>
				<u-upload ref="imageUpload" :action="uploadFileUrl" :header="header" :auto-upload="true"
					:show-progress="showProgress" max-count="1" @on-success="imageSucess"
					@on-remove="imageRemove"></u-upload>
			</view>

		</view>
		<u-select v-model="showSection" :list="sectionList" @confirm="selectSection"
			:default-value="chooseSection.sectionIndex"></u-select>
	</view>
</template>

<script>
	import {
		marked
	} from 'marked'
	import JinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		components: {
			JinEdit
		},
		data() {
			return {
				titleCurrent: '发布帖子',
				publishDisabled: true,
				publishLoading: false,
				uploadFileUrl: '',
				header: {},
				showProgress: true,
				form: {
					id: undefined,
					userId: undefined,
					regionId: undefined,
					sectionId: undefined,
					image: undefined,
					regionId: undefined,
					title: undefined,
					content: undefined,
					likeNumber: 0,
					collectNumber: 0,
					replyNumber: 0,
					viewNumber: 0,
					reportNumber: 0,
					publishTime: undefined,
					type: '0',
					status: '0'
				},
				contentText: undefined,
				contentHtml: undefined,
				focusFlag: false,
				chooseSection: {
					sectionName: "选择发布版块 (必选)",
					sectionIndex: [0],
				},
				showSection: false,
				sectionList: [],
				sectionTitleStyle: {
					fontSize: "36rpx",
					color: "#C0C4CC"
				},
				chooseSectionTitleStyle: {
					fontSize: "36rpx",
					color: "#000000"
				},
				inputStyle: {
					paddingLeft: "25rpx",
					fontSize: "36rpx",
					borderBottom: "1px solid #eee",
				},
				focusStyle: {
					paddingLeft: "25rpx",
					fontSize: "36rpx",
					borderBottom: "1px solid #019af9",
				}
			}
		},
		watch: {
			form: {
				deep: true,
				handler(newVal, oldVal) {
					if (newVal.content && newVal.title && newVal.sectionId) {
						if (this.contentText.length > 1) {
							this.publishDisabled = false
						} else {
							this.publishDisabled = true
						}
					} else {
						this.publishDisabled = true
					}
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.form.id = options.id
				this.getPostDetail()
			}
			this.init()
		},
		methods: {
			getPostDetail() {
				this.$u.api.postData.getPost({
						id: this.form.id
					})
					.then(res => {
						Object.keys(res.data).forEach((key) => {
							this.form[key] = res.data[key]
						})
						this.contentText = res.data.content
						this.contentHtml=this.markdownToContent(res.data.content)
						this.sectionList.find((item, index) => {
							if (item.value === res.data.sectionId) {
								this.chooseSection.sectionName = item.label
								this.chooseSection.sectionIndex = [index] || [0]
							}
						})
					});
			},
			markdownToContent(markdown) {
				return marked(markdown)
			},
			init() {
				this.header.Authorization = this.vuex_token
				this.uploadFileUrl = this.vuex_config.baseUrl + '/common/upload'
				if (this.$store.state.region) {
					this.form.regionId = this.$store.state.region.id
				}
				if (this.vuex_user) {
					this.form.userId = this.vuex_user.id
				}
				if (this.$store.state.sectionList) {
					let list = this.$store.state.sectionList;
					list.forEach(item => {
						this.sectionList.push({
							label: item.name,
							value: item.id
						})
					})
				}

			},
			imageRemove() {
				this.showProgress = true
				this.form.image = ''
			},
			imageSucess(data) {
				setTimeout(() => {
					this.showProgress = false
				}, 500)
				this.form.image = data.url
			},
			addPost() {
				this.publishLoading = true
				if (this.form.id) {
					this.$u.api.postData.update(this.form)
						.then(res => {
							// console.log(res);
							this.publishLoading = false
							this.userTip(res)
						})
						.catch(err => {
							uni.hideLoading();
						});
				} else {
					this.$u.api.postData.add(this.form)
						.then(res => {
							// console.log(res);
							this.publishLoading = false
							this.userTip(res)
						})
						.catch(err => {
							uni.hideLoading();
						});
				}

			},
			userTip(res) {
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 500)

				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: res.msg,
						success(res) {}
					})
				}
			},
			selectSection(item) {
				this.chooseSection.sectionIndex = [this.sectionList.findIndex(section => section.value === item[0]
					.value)] || [0]
				// console.log(this.chooseSection);
				this.chooseSection.sectionName = item[0].label
				this.form.sectionId = item[0].value
			},
			inputChange(e) {
				this.contentText = e.detail.text
				this.form.content = e.detail.html
			},
			showSectionList() {
				this.showSection = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 0rpx 15rpx;
	}

	.publish-wrap {
		margin-right: 10rpx;

		.publish-buttom-text {
			padding: 0rpx 20rpx;
			font-size: 12px;
			line-height: 12px;
		}
	}

	.image-wrap {
		padding-top: 10rpx;
		margin-left: 15rpx;
		border-top: 2px solid #eee;

		.tips-text {
			padding: 10rpx;
			margin-bottom: 30rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
	}
</style>